<template>
	<el-row class="logBox">
		<el-col :span="23">
			<div style="width: 100%;display: flex;flex-direction: row;align-items: center;">
				<div class="selectBox">
					<div>IP：</div>
					<el-select v-model="inputForm.ip" filterable placeholder="请选择" clearable>
						<el-option v-for="item in options" :key="item.CID" :label="item.label" :value="item.CID">
						</el-option>
					</el-select>
				</div>
				<div class="selectBox">
					<div>用户名：</div>
					<el-select v-model="inputForm.name" filterable placeholder="请选择" clearable>
						<el-option v-for="item in selectNameList" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
				</div>
				<template>
					<div>选择时间：</div>
					<div class="block">
						<el-date-picker v-model.lazy="chooseTime" :picker-options="expireTimeOPtion"
							value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</template>
				<div style="margin-left: 20px;">
					<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					<el-button type="warning" icon="el-icon-refresh" @click="reset">重置</el-button>
				</div>
			</div>
			<div class="rightBox">
				<template>
					<el-table :data="tableData" stripe style="width: 100%" :header-cell-style="headClass"
						:cell-style="rowClass">
						<el-table-column prop="ip" label="ip" width="200">
						</el-table-column>
						<!-- <el-table-column prop="ip" label="IP" width="200">
						</el-table-column> -->
						<el-table-column prop="username" label="用户名" width="250">
						</el-table-column>
						<el-table-column prop="logonTime" label="登录时间" width="250">
						</el-table-column>
						<el-table-column prop="machine" label="登陆设备" width="450">
						</el-table-column>
						<el-table-column prop="module" label="登录方式" width="250">
						</el-table-column>
						<el-table-column prop="RecordTime" label="记录时间" width="200">
						</el-table-column>
					</el-table>
				</template>
				<div class="fenyeBox">
					<div class="block">
						<el-pagination @current-change="handleCurrentChange"
							:page-size="form.pageSize" :total="total" background>
						</el-pagination>
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import bus from 'common/bus.js';
	import {
		postJavaServerData,
		submitAdmin
	} from "@/api";
	import {
		getData
	} from '../../../utils/IndexedDB';
	import {
		Log
	} from '@icon-park/vue';
	export default {
		data() {
			return {
				tableData: [],
				dialogVisible: true,
				options: [],
				selectNameList: [],
				value: '',
				selectName: '',
				chooseId: 1,
				nodeList: [],
				chooseFrom: {},
				chooseIP: '',
				serverList: [],
				chooseTime: [],
				allData: [],
				postData: {
					opera: "GetDBMonitor",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				total: 0,
				form: {
					name: '',
					ip: '',
					time: '',
					time2:new Date(),
					pageNum: 1,
					pageSize: 10
				},
				form2: {
					name: '',
					ip: '',
					time: '',
					time2: '',
					pageNum: 1,
					pageSize: 10000000
				},
				inputForm: {
					name: '',
					ip: '',
					time: '',
					time2: '',
					pageNum: 1,
					pageSize: 10
				},
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 
					}
				},
			}
		},
		created() {
			this.firstTime()
			this.getAllName()
			this.getNode()
		},
		methods: {
			async getDataAll() {
				let res = await postJavaServerData("/Sp/oraclelog", this.form)
				// console.log(333,res)
				const key = Object.keys(res)
				this.total = parseInt(key[0])
				let array = Object.keys(res).map(key => res[key])
				this.tableData = array[0]
				this.tableData.forEach((item, index) => {
					console.log(156, item.cid, this.serverList)
					for (let i = 0; i < this.serverList.length; i++) {
						if (item.cid == this.serverList[i].CID) {
							item.ip = this.serverList[i].IP
							console.log('ip传入之后', this.tableData)
						}
					}
				})
				console.log(666, this.tableData)
				// this.allData = this.tableData
				// this.getNode()
			},
			async getAllName() {
				let res = await postJavaServerData("/Sp/oraclelog", this.form2)
				const key = Object.keys(res)
				let array = Object.keys(res).map(key => res[key])
				// console.log(888,array[0])
				array[0].forEach((item, index) => {
					this.selectNameList.push(item.username)
				})
				//数组去重
				this.selectNameList = Array.from(new Set(this.selectNameList))
			},
			search() {
				console.log(this.chooseTime)
				if (this.inputForm.ip == '' && this.inputForm.name == '' && this.chooseTime.length == 0) {
					this.getDataAll()
				} else {
					this.getData()
				}
			},
			async getData() {
				console.log(6666,this.inputForm)
				if(this.chooseTime.length != 0){
					this.inputForm.time = this.chooseTime[0]
					this.inputForm.time2 = this.chooseTime[1]
				}
				let res = await postJavaServerData("/Sp/oraclelog", this.inputForm)
				const key = Object.keys(res)
				this.total = parseInt(key[0])
				let array = Object.keys(res).map(key => res[key])
				console.log(array[0])
				this.tableData = array[0]
				// this.tableData.forEach((item,index)=>{
				// 	this.tableData[index].ip = this.chooseIP
				// })
				this.tableData.forEach((item, index) => {
					// console.log(156, item.cid, this.serverList)
					for (let i = 0; i < this.serverList.length; i++) {
						if (item.cid == this.serverList[i].CID) {
							item.ip = this.serverList[i].IP
							// console.log('ip传入之后', this.tableData)
						}
					}
				})
				console.log(666, this.tableData)
			},
			choose(id) {
				this.chooseId = id
			},
			firstTime() {
				let time = Date.parse(new Date(this.form.time2))
				let startTime = parseInt(time) - 3600000 * 30 * 24
				this.form.time = this.changeTime(startTime)
				this.form.time2 = this.changeTime(time)
				this.chooseTime[0] = this.changeTime(startTime)
				this.chooseTime[1] = this.changeTime(time)
				console.log(this.form.time)
			},
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			reset() {
				this.inputForm.name = ''
				this.inputForm.ip = ''
				this.inputForm.time = ''
				this.inputForm.time2 = ''
				this.chooseTime = []
				this.getDataAll()
			},
			async getNode() {
				let res = await submitAdmin({
					postData: JSON.stringify(this.postData),
				})
				this.serverList = res.data
				console.log('原本', this.serverList)
				let arr = res.data
				this.options = arr
				const newArr = arr.map((item, index) => {
					let a = item.IP + '/' + item.SYSTEMNAME
					return {
						...item,
						label: a
					}
				})
				this.options = newArr
				this.getDataAll()
				console.log('现在', this.options)

			},
			selectNode(e) {
				if (e == '') {
					this.getDataAll()
				} else {
					this.dialogVisible = false
					this.serverList.map((item, index) => {
						if (this.value == item.CID) {
							this.form.ip = item.CID
							this.chooseIP = item.IP
							// this.form = {...this.form,b}
							console.log(this.form)
						}
					})
					this.getData()
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.form.pageNum = val
				if (this.inputForm.ip == '' && this.inputForm.name == '' && this.chooseTime.length == 0) {
					this.getDataAll()
				} else {
					this.getData()
				}
			},
			headClass() { //表头居中显示
				return "text-align:center"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center"
			}
		},
	}
</script>

<style scoped>
	.logBox {
		width: 100%;
		height: 840px;
		background-color: white;
		border-radius: 5px;
		border: 1px solid #ddd;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	::v-deep .el-table__body tr,
	::v-deep .el-table__body td {
		padding: 0;
		height: 60px;
	}

	.selectBox1 {
		width: 100%;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.leftBoxTitle {
		width: 100%;
		height: 50px;
		font-size: 20px;
		border-bottom: solid 1px #ddd;
	}

	.selectBox {
		width: 300px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.rightBox {
		width: 100%;
		height: 750px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
	}

	.leftBox {
		width: 100%;
		height: 800px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
	}

	.fenyeBox {
		margin: 10px auto;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>
